<template>
  <div class="tb-container">
    <div class="tb-title" style="font-size: 14px;">{{data.title}}</div>
    <div class="tab-s">
    <div class="scroll">
        <table class="table-1">
            <tr>
                <th class="td-1" v-for="(item,index) in data.headerNames" :key="index">{{item}}</th>
                <!-- <th class="td-1">序号</th>
                <th class="td-2">名称</th>
                <th class="td-3">位置</th> -->
            </tr>
        </table>
        <list-scroll class="box" :speed="0.3">
            <div class="list">
                <div class="item-s" v-for="(item,index) in data.dataList" :key="index">
                    <div class="item-s-c td-1"> {{ item.id }} </div>
                    <div class="item-s-c td-2"> {{ item.name }} </div>
                    <div class="item-s-c td-3"> {{ item.val }} </div>
                </div>
            </div>
        </list-scroll>
    </div>
  </div>
  </div>

</template>

<script>
import ListScroll from "../../views/listScroll"
export default {
  name: 'TbCmp',
  props: ['data'],
  data () {
    return {
      // tb1List: [
      //   {id:'1',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
      //   {id:'2',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
      //   {id:'3',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
      //   {id:'4',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
      //   {id:'5',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
      //   {id:'6',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
      //   {id:'7',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
      //   {id:'8',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
      //   {id:'9',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
      //   {id:'10',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
      //   {id:'11',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
      //   {id:'12',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
      //   {id:'13',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
      //   {id:'14',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
      //   {id:'15',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
      // ],
    }
  },
  components: { 
    ListScroll,
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
.tb-container {
  width: 100%;
  height: 100%;

  

  .tb-title {
    width: 100%;
    height: 50px;

    display: flex;
    align-items: center;
    font-size: .2rem;
    font-weight: 700;
    padding-left: 20px;
    background: rgba($color: #005ABF, $alpha: 0.4);
    
    }
  .tab-s{
    width: 100%;
    height: 100%;
    // margin: 10px auto 0 auto;
    overflow: hidden;
    .table-1{
      position: relative;
      width: 100%;
      text-align: center;
      background: rgba($color: #153863, $alpha: 0.4);
      z-index: 1;
      th{
        text-align: center;
        background-color: rgba($color: #153863, $alpha: 0.2);
        // width: 50%;
        color: #fff;
      }
    }

    .td-1,.td-2,.td-3{
      width: 30%;
      height: 30px;
      line-height: 30px;
    }
    .td-4,.td-5{
      width: 20%;
      img{
        width: 20px;
        height: 20px;
        margin-top: 5px;
      }
    }
    .box {
      height: 300px;
      .list {
        width: 100%;
        .item-s {
          display: flex;
          justify-content: space-between;
          cursor: pointer;
          &:hover {box-shadow: inset 0px 0px 16px 0px #14B5FF;color: #14E0FF;}
          color: #fff;
          table-layout:fixed;
          border-bottom: 1px solid rgb(21,136,189);
          .item-s-c{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
            width: 30%;
          }
        }
      }
    }
  }
}

</style>
